<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>存款类型列表 - 管理后台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #e0e7ff 0%, #f5f7fa 100%);
            font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
        }
        .content-area {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 40px 0;
        }
        .card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);
            padding: 40px 36px 32px 36px;
            max-width: 800px;
            width: 100%;
        }
        .section-title {
            font-size: 22px;
            color: #1a3a6c;
            margin-bottom: 28px;
            padding-bottom: 12px;
            border-bottom: 2px solid #1a3a6c;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .section-title i {
            color: #1a3a6c;
            font-size: 22px;
        }
        .form-group {
            margin-bottom: 28px;
        }
        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #444;
            font-size: 16px;
        }
        .form-group input {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
            margin-right: 15px;
        }
        .form-group input:focus {
            border-color: #1a3a6c;
            box-shadow: 0 0 0 3px rgba(26, 58, 108, 0.08);
            outline: none;
        }
        .btn-primary {
            padding: 15px 25px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background: #1a3a6c;
            color: #fff;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 8px rgba(26, 58, 108, 0.10);
        }
        .btn-primary:hover {
            background: #15315a;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(26, 58, 108, 0.18);
        }
        .result-card {
            margin-top: 24px;
            background: #f8f9fa;
            border-left: 4px solid #1a3a6c;
            border-radius: 8px;
            padding: 18px 20px;
            font-size: 15px;
            color: #1a3a6c;
            box-shadow: 0 2px 8px rgba(26, 58, 108, 0.06);
            display: none;
            align-items: center;
            gap: 10px;
        }
        .result-card.error {
            border-left-color: #e74c3c;
            color: #e74c3c;
        }
        .result-card i {
            font-size: 18px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        th {
            background: #1a3a6c;
            color: #fff;
            font-weight: 600;
        }
        tr:hover {
            background: #f8f9fa;
        }
        .pagination {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .page-btn {
            padding: 8px 15px;
            border: 1px solid #1a3a6c;
            background: #fff;
            color: #1a3a6c;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .page-btn:hover:not(:disabled) {
            background: #1a3a6c;
            color: #fff;
        }
        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .page-info {
            margin: 0 15px;
            font-weight: 600;
            color: #1a3a6c;
        }
        .jump-input {
            width: 60px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="content-area">
        <div class="card">
            <div class="section-title">
                <i class="fa fa-list"></i>存款类型列表
            </div>
            <div class="form-group">
                <label>查询参数</label>
                <input id="page-num" type="number" placeholder="页码" value="1" min="1" readonly>
                <input id="page-size" type="number" placeholder="每页数量" value="10" min="1" max="100">
                <button class="btn-primary" onclick="query()">
                    <i class="fa fa-search"></i>查询
                </button>
            </div>
            <div id="result-container"></div>
            <div id="pagination-container" class="pagination"></div>
            <div class="result-card" id="error-msg">
                <i class="fa"></i>
                <span id="error-msg-text"></span>
            </div>
        </div>
    </div>

    <script>
        let allDeposits = [];
        let currentPage = 1;
        let pageSize = 10;

        function fetchAllDeposits() {
            // 请求一个足够大的数量以获取所有数据
            fetch('http://localhost:8080/admin/deposit/getList?nums=1&size=9999')
                .then(r => r.json())
                .then(d => {
                    if (d.code === '200' && d.data && d.data.records) {
                        allDeposits = d.data.records;
                        query(); // 使用获取的数据进行首次渲染
                        hideError();
                    } else {
                        showError(d.message || '查询失败');
                    }
                })
                .catch(e => {
                    allDeposits = [];
                    query(); // 渲染空状态
                    showError('网络请求失败：' + e.toString());
                });
        }

        function renderPage(page = 1) {
            pageSize = parseInt(document.getElementById('page-size').value) || 10;
            
            const resultContainer = document.getElementById('result-container');
            const paginationContainer = document.getElementById('pagination-container');
            
            if (allDeposits.length === 0) {
                resultContainer.innerHTML = '<p style="text-align: center; color: #666; margin: 20px 0;">暂无数据</p>';
                paginationContainer.innerHTML = '';
                return;
            }

            const totalPages = Math.ceil(allDeposits.length / pageSize);
            currentPage = Math.max(1, Math.min(page, totalPages));
            
            document.getElementById('page-num').value = currentPage;

            const start = (currentPage - 1) * pageSize;
            const end = start + pageSize;
            const pageRecords = allDeposits.slice(start, end);

            let html = '<table><tr><th>存款ID</th><th>存款类型名称</th><th>描述</th></tr>';
            pageRecords.forEach(deposit => {
                html += `<tr>
                    <td>${deposit.savingID || ''}</td>
                    <td>${deposit.savingName || ''}</td>
                    <td>${deposit.descrip || ''}</td>
                </tr>`;
            });
            html += '</table>';
            resultContainer.innerHTML = html;

            let pagHtml = `<button class='page-btn' onclick='renderPage(${currentPage - 1})' ${currentPage <= 1 ? 'disabled' : ''}>
                               <i class='fa fa-angle-left'></i> 上一页
                           </button>`;
            pagHtml += `<span class="page-info">第 ${currentPage} / ${totalPages} 页</span>`;
            pagHtml += `<input class='jump-input' id='jumpPageInput' type='number' min='1' max='${totalPages}' value='${currentPage}'>`;
            pagHtml += `<button class='page-btn' onclick='jumpToPage()'>跳转</button>`;
            pagHtml += `<button class='page-btn' onclick='renderPage(${currentPage + 1})' ${currentPage >= totalPages ? 'disabled' : ''}>
                            下一页 <i class='fa fa-angle-right'></i>
                       </button>`;
            paginationContainer.innerHTML = pagHtml;
        }

        function jumpToPage() {
            const totalPages = Math.ceil(allDeposits.length / pageSize);
            let val = parseInt(document.getElementById('jumpPageInput').value);
            if (!isNaN(val) && val >= 1 && val <= totalPages) {
                renderPage(val);
            }
        }

        function query() {
            renderPage(1);
        }

        function showError(message) {
            const errorCard = document.getElementById('error-msg');
            const errorText = document.getElementById('error-msg-text');
            errorCard.className = 'result-card error';
            errorCard.querySelector('i').className = 'fa fa-times-circle';
            errorText.innerText = message;
            errorCard.style.display = 'flex';
        }

        function hideError() {
            document.getElementById('error-msg').style.display = 'none';
        }

        window.addEventListener('load', function() {
            fetchAllDeposits();
        });
    </script>
</body>
</html>